<template>
  <div class="project">
    <div class="toolBar">
      <el-input
        v-model="searchWord"
        size="small"
        @clear="getProjectList"
        style="width: 30%"
        type="text"
        placeholder="项目名称"
        clearable
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
        <el-button
          @click="getProjectList"
          slot="append"
          icon="el-icon-search"
        ></el-button>
      </el-input>
      <el-select
        size="small"
        v-model="projectTypeId"
        slot="prepend"
        placeholder="项目类型"
        clearable
        style="margin-left: 10px"
        @change="getProjectList"
      >
        <el-option
          v-for="(item, index) in projectTypeList"
          :key="index"
          :label="item.typeName"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-button
        @click="showAdd = true"
        style="margin-left: 10px"
        size="small"
        type="primary"
        ><i class="el-icon-plus"></i> 新建项目</el-button
      >
      <!-- <el-button
        @click="showAddProjectKind = true"
        style="margin-left: 10px"
        size="small"
        type="primary"
        ><i class="el-icon-plus"></i> 增加分类</el-button
      > -->
      <el-button @click="deleteKind" size="small" type="danger"
        ><i class="el-icon-delete"></i> 删除选中</el-button
      >
    </div>
    <div class="content">
      <el-table
        border
        stripe
        size="small"
        :highlight-current-row="true"
        :data="tableData"
        style="width: 100%"
        height="490"
        @selection-change="selectDelete"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="projectName" label="项目名称"></el-table-column>
        <el-table-column
          prop="projectTypeName"
          label="所属类型"
        ></el-table-column>
        <el-table-column prop="groupName" label="所属群组"></el-table-column>
        <el-table-column prop="createTime" label="创建日期"></el-table-column>
        <el-table-column align="center" label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row)" size="mini" type="primary"
              ><i class="el-icon-edit"></i
            ></el-button>
            <el-button
              @click="removeKind(scope.row.id)"
              size="mini"
              type="danger"
              ><i class="el-icon-delete"></i
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          small
          background
          layout="total, prev, pager, next"
          :total="total"
          @current-change="goSize"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog title="新增项目" :visible.sync="showAdd">
      <el-form size="small">
        <el-form-item label="项目名称">
          <el-input
            style="width: 70%"
            v-model="add.projectName"
            placeholder="项目名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属类型">
          <el-select v-model="add.projectTypeId">
            <el-option
              v-for="(item, index) in projectTypeList"
              :key="index"
              :label="item.typeName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属组群">
          <el-radio-group v-model="kindCode" @change="getGroupTree">
            <el-radio label="bu">BU</el-radio>
            <el-radio label="dept">部门</el-radio>
          </el-radio-group>
          <el-cascader
            v-model="groupIds"
            clearable
            :options="options"
            :props="{ expandTrigger: 'hover', value: 'id', label: 'kindName' }"
            @change="handleChange"
            style="margin-left: 10px"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item class="diaBtn">
          <el-button type="primary" @click="addProject">确定</el-button>
          <el-button @click="showAdd = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="新增项目分类" :visible.sync="showAddProjectKind">
      <el-form size="small">
        <el-form-item label="分类名称">
          <el-input
            placeholder="项目分类名称"
            v-model="newProjectKind"
          ></el-input>
        </el-form-item>
        <el-form-item class="diaBtn">
          <el-button type="primary" @click="addProjectKind">确定</el-button>
          <el-button @click="showAddProjectKind = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import * as api from "@/js/workTimeApi"
export default {
  name: "Project",
  data() {
    return {
      searchWord: null,
      tableData: [],
      total: 0,
      deleteIdList: [],
      showAdd: false,
      showAddProjectKind: false,
      add: {
        projectTypeId: 1,
      },
      isEditBtn: false,
      projectTypeList: [],
      newProjectKind: null,
      pageNum: 1,
      pageSize: 10,
      projectTypeId: null,
      options: [],
      kindCode: "dept",
      groupIds: [],
      groupKindList: [],
    };
  },
  methods: {
    //跳页
    goSize(currentPage) {
      this.pageNum = currentPage;
      this.getProjectList();
    },
    //查询
    async getProjectList() {
      await this.getAllGroupTypeList();
      api
        .getProjectList({
          projectName: this.searchWord,
          projectTypeId: this.projectTypeId,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        })
        .then((res) => {
          if (res.status === "success") {
            this.tableData = res.data.rows;
            this.total = res.data.total;
            res.data.rows.forEach((element, index) => {
              let obj = this.projectTypeList.find((value) => {
                return element.projectTypeId == value.id;
              });
              this.tableData[index].projectTypeName = obj.typeName;
            });
            this.tableData.forEach((element, index) => {
              let obj = this.groupKindList.find((value) => {
                return element.groupId == value.id;
              });
              if (obj != null) {
                this.tableData[index].groupName = obj.kindName;
              }
            });
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
        });
      api.getNormalUserMessage();
      api.getPowerUserMessage();
    },
    //选择删除
    selectDelete(data) {
      let temp = [];
      data.forEach((element) => {
        temp.push(element.id);
      });
      // console.log(temp);
      this.deleteIdList = temp;
    },
    removeKind(id) {
      this.deleteIdList = [];
      this.deleteIdList.push(id);
      this.deleteKind();
    },
    //删除
    deleteKind() {
      this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.deleteProject(this.deleteIdList).then((res) => {
            if (res.status == "success") {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getProjectList();
              this.deleteIdList = [];
            } else {
              this.$message({
                type: "error",
                message: res.message,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //新增分类
    addProject() {
      if (this.add.projectName == null || this.add.projectName.trim() == "") {
        this.$message({
          type: "warning",
          message: "请输入项目名后操作",
        });
        return;
      }
      if (this.isEditBtn) {
        api.updateProject(this.add).then((res) => {
          if (res.status == "success") {
            this.$message({
              type: "success",
              message: "修改成功",
            });
            this.getProjectList();
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
          this.isEditBtn = false;
          this.showAdd = false;
        });
      } else {
        api.createProject(this.add).then((res) => {
          if (res.status == "success") {
            this.$message({
              type: "success",
              message: "添加成功",
            });
            this.getProjectList();
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
          this.showAdd = false;
        });
      }
    },
    //编辑
    edit(data) {
      this.add = data;
      this.showAdd = true;
      this.isEditBtn = true;
    },
    //获取项目类型列表
    getProjectTypeList() {
      api.getProjectTypeList().then((res) => {
        this.projectTypeList = res.data.rows;
      });
    },
    //获取所有群组分类列表
    getAllGroupTypeList() {
      api.getGroupKindList({ pageNum: 1, pageSize: 500 }).then((res) => {
        this.groupKindList = res.data.records;
      });
    },
    //获取群组树形结构
    getGroupTree() {
      api.getGroupKindTree({ kindCode: this.kindCode }).then((res) => {
        this.options = res.data;
      });
    },
    //级联选项
    handleChange(data) {
      this.add.groupId = data[data.length - 1];
      // console.log(data[data.length - 1]);
    },
    //新增项目分类
    addProjectKind() {
    if(this.newProjectKind == null || this.newProjectKind.trim() == ""){
      this.$message({
          type: "warning",
          message: "请输入项目分类名后操作",
        });
        return;
    }else{
      api.createProjectKind({ typeName: this.newProjectKind }).then((res) => {
        if (res.status == "success") {
          this.$message({
            type: "success",
            message: "添加成功",
          });
        } else {
          this.$message({
            type: "error",
            message: res.message,
          });
        }
        this.showAddProjectKind = false;
        this.getProjectTypeList();
      });
    }
   },
  },
  async mounted() {
    this.getGroupTree();
    await this.getProjectTypeList();
    this.getProjectList();
  },
};
</script>
<style scoped>
.project {
  padding-top: 20px;
}
.toolBar {
  display: flex;
}
.content {
  margin-top: 10px;
}
.diaBtn {
  display: flex;
  justify-content: center;
}
.pagination {
  margin-top: 10px;
  width: 100%;
  text-align: center;
}
</style>